<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <style type="text/css">
    body{
        margin:0px;
        text-align:center;
    }
    #reg {
        width:370px;
        border:1px solid blue;
        line-height:40px;
        margin:0 auto;
        padding-left:100px;
        padding-top:15px;
        padding-bottom:15px;
        text-align:left;
        font-size:14px;
    }

    .error {
        color:red;
    }
    </style>
</head>
<body>
   <?php 
    include 'HeaderNav.html'; //包含页头与导航页
    ?>
   <h1>学生注册</h1>
   <form action="RegisterData.php" method="post" enctype="multipart/form-data">
   <div id="reg">
      <div>
      学号：<input type="text" name="stuNo" /><span class="error">*</span>
      </div>
      <div>
      姓名：<input type="text" name="stuName" /><span class="error">*</span>
      </div>
      <div>
      密码：<input type="password" name="pwd" /><span class="error">*</span>
      </div>
      <div style="margin-left:-28px;">
      确认密码：<input type="password" name="confirmPwd" /><span class="error">*</span>
      </div>
      <div>
          班级：<select name="className" id="">
              <?php 
              //引用数据库连接文件
                require_once 'Conn.php';

              //设置字符集，避免中文乱码
                $db->query("SET NAMES utf8");

              //定义SQL语句，查询班级信息
                $sql = "SELECT * FROM Class";

              //执行SQL语句,返回结果，并显示为列表项信息
                if ($result = $db->query($sql)) {
                  //获取数据
                    while ($row = $result->fetch_assoc()) {
                        echo "<option value='" . $row["classNo"] . "'>" . $row["className"] . "</option>";
                      //echo "<option value='AA'>aaaaa</option>";
                    }
                }
              //释放结果集
                $result->close();
              //关闭连接
                $db->close();
                ?>
          </select>
      </div>
      <div>
          性别：<input type="radio" name="sex" value="男" checked>男
          <input type="radio" name="sex" value="女">女
      </div>
      <div>
      爱好：<input type="checkbox" name="hobby[]" value="阅读" />阅读
      <input type="checkbox" name="hobby[]" value="运动" />运动
      <input type="checkbox" name="hobby[]" value="电影" />电影
      <input type="checkbox" name="hobby[]" value="音乐" />音乐
      </div>
      <div style="margin-left:42;margin-top:-12px;">
      <input type="checkbox" name="hobby[]" value="旅游" />旅游
      <input type="checkbox" name="hobby[]" value="上网" />上网
      </div>
      <div>
      手机：<input type="text" name="mobile" /><span class="error"></span>
      </div>
      <div>
      邮箱：<input type="text" name="email" /><span class="error"></span>
      </div>
      <div>
      相片：<input type="file" name="photo" />
      <br />*上传文件大小不要超过2M,必须是.jpg、.gif、.png类型
      </div>
      <div style="margin-left:85px">
      <input type="submit" name="btnSubmit" value="注册" />
      </div>
   </div>
</form>

<script type="text/javascript">
var elform = document.getElementsByTagName("form")[0]; //获取表单
       elform.onsubmit = function() {
           //表单提交，调用checkData()函数验证数据，如果验证出错，终止表单提交
           return checkData();
       }
       //验证各项用户输入的数据
       function checkData() {
           var valid = true;  //验证是否通过的标识
           //学号必填
           var elStuNo = document.getElementsByName("stuNo")[0]; //获取学号文本框
           if (elStuNo.value == "") {
               elStuNo.nextSibling.innerHTML = "*学号必填!";  //学号文本框右侧的文字标签显示提示信息
               valid = false; //验证错误
           } else {
               elStuNo.nextSibling.innerHTML = "*";//清除错误提示信息
           }
           //姓名必填
           var elStuName = document.getElementsByName("stuName")[0]; //获取姓名文本框
           if (elStuName.value == "") {
               elStuName.nextSibling.innerHTML = "*姓名必填!";
               valid = false;
           } else {
               elStuName.nextSibling.innerHTML = "*";
           }

           //密码必填
           var elPwd = document.getElementsByName("pwd")[0]; //获取密码文本框
           if (elPwd.value == "")  {
               elPwd.nextSibling.innerHTML = "*密码必填!";
               valid = false;
           } else {
               elPwd.nextSibling.innerHTML = "*";
           }

           //确认密码必须与密码相同
           var elConfirmPwd = document.getElementsByName("confirmPwd")[0];  //获取确认密码文本框
           if (elConfirmPwd.value !== elPwd.value)  {
               elConfirmPwd .nextSibling.innerHTML = "*确认密码必须密码一致!";
               valid = false;
           } else {
               elConfirmPwd .nextSibling.innerHTML = "*";
           }
           return valid;   //返回验证结果
       }
</script>
<?php include 'Footer.html';   //包含页脚页
?>
</body>
</html>